<template>
  <div class="interest">
    <div class="area">
      <img
        :src="imgUrl + '/bigRun/bgc/hotel-banner2.png'"
        alt=""
        class="img1"
      />
      <div class="box">
        <div class="box1">
          <div class="name">
            <div class="name1">领取人姓名：</div>
            <input type="text" v-model="name" @blur="blur_username" />
          </div>
          <div class="date">
            <van-cell is-link @click="showPopup">
              <span class="name1">出生日期：{{ nowDate }}</span>
            </van-cell>
            <van-popup v-model="show" position="bottom">
              <van-datetime-picker
                v-model="currentDate"
                type="date"
                title="选择年月日"
                :min-date="minDate"
                :max-date="maxDate"
                @cancel="show = false"
                @confirm="confirmPicker"
                placeholder="currentDate"
              />
            </van-popup>
          </div>
          <div class="emailBox">
            <div class="email">电子邮箱：</div>
            <input
              type="text"
              v-model="email"
              @blur="blur_userEmail"
              v-validate="'required|email'"
            />
          </div>
          <div class="name4">
            <span class="name5">手机号码：</span>
            <input
              type="text"
              v-model="phone"
              @blur="blur_userphone"
              v-validate="'required|phone'"
            />
          </div>
        </div>
      </div>

      <div class="yesButton" @click="yesBtn">确认领取</div>
      <div class="mask" v-if="showModal"></div>
      <div class="pop" v-if="showModal">
        <div class="center">
          您的柏纳仕权益已经开通成功，请您在收到短信后，使用初始密码和手机号登录柏纳仕小程序，搜索酒店,找到活动的房源,直接下单预订。
        </div>
        <div class="iknow" @click="yesIkonw">我知道了</div>
      </div>
    </div>
  </div>
</template>
<script>
import { Popup, DatetimePicker, Toast } from 'vant'
export default {
  components: {
    [Toast.name]: Toast,
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker
  },
  data() {
    return {
      activityProductNo: this.$route.query.activityProductNo,
      equityNo: this.$route.query.equityNo,
      productName: this.$route.query.productName,
      id: this.$route.query.id,
      name: '',
      email: '',
      phone: '',
      show: false,
      minDate: new Date(1885, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      nowDate: '',
      showModal: false, // 默认不显示遮罩层
    };
  },
  directives: {
    // 修饰input框的指令
    input: {
      // 当被绑定的元素插入到DOM上的时候
      inserted: function (el) {
        console.log('el===>>>', el)
        el.style.width = "300px";
        el.style.height = "35px";
        el.style.lineHeight = "35px";
        el.style.background = "#ddd";
        el.style.fontSize = "16px";
        el.style.border = '1px solid #eee';
        el.style.textIndent = "5px";
        el.style.textIndent = "8px";
        el.style.borderRadius = "5px";
      }
    },
    // 验证
    validate: {
      inserted: function (el, validateStr) {
        // 将验证规则拆分为验证数组
        const validateRuleArr = validateStr.value.split("|");
        // 监听失去焦点的时候
        el.addEventListener('blur', function () {
          // 失去焦点进行验证
          checkedfun()
        });

        // 循环进行验证
        function checkedfun() {
          for (var i = 0; i < validateRuleArr.length; ++i) {
            let requiredRegex = /^required$/; // 判断设置了required
            let phoneRegex = /^phone$/; // 判断设置了 phone
            let emailRegex = /^email$/; // 判断设置了email
            // 判断设置了required
            if (requiredRegex.test(validateRuleArr[i])) {
              if (!required()) {
                break
              }
            }

            // 判断设置了 phone
            if (phoneRegex.test(validateRuleArr[i])) {
              if (!phone()) {
                break
              }
            }
            // 判断设置了email
            if (emailRegex.test(validateRuleArr[i])) {
              if (!email()) {
                break;
              }
            }

          }

        }

        // 验证是否是必填项
        function required() {
          if (el.value == '' || el.value == null) {
            Toast("不能为空")
            return false;
          }

          return true;
        }

        // 验证是否是手机号码
        function phone() {
          const phoneRule = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
          if (!phoneRule.test(el.value)) {
            Toast("请输入正确的手机号码")
            return false;
          }

          return true;
        }
        // 验证是否是邮箱
        function email() {
          let emailRule = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
          if (!emailRule.test(el.value)) {
            Toast("请输入正确的邮箱地址");
            return false;
          }
          return true;
        }
      },
    }
  },
  created() {
    console.log('params', this.activityProductNo, this.equityNo, this.productName, this.id);

  },
  mounted() {
  },
  methods: {
    blur_username() {
      if (this.name === '') {
        Toast('不能为空')
      }
    },
    blur_userEmail() {
      if (this.email === '') {
        Toast('不能为空')
      }
    },
    blur_userphone() {
      if (this.phone === '') {
        Toast('不能为空')
      }
    },

    showPopup() {
      this.show = true;
    },
    confirmPicker() {
      var seperator1 = '-';
      var year = this.currentDate.getFullYear();
      var month = this.currentDate.getMonth() + 1;
      var strDate = this.currentDate.getDate(); //月份的某一天
      if (month >= 1 && month <= 9) {
        month = '0' + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      console.log(currentdate)
      this.nowDate = currentdate
      this.show = false
    },

    yesBtn() { // 确认领取

      // this.showModal = true

      const emailRule = /^([a-zA-Z0-9]+[|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;;
      const phoneRule = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;

      if (!phoneRule.test(this.phone) || this.phone == '' || (!emailRule.test(this.email)) || this.email == '') {
        Toast("手机号或邮箱错误，请重新输入")
        return false
      } else {

        const params = {
          birthData: this.nowDate,
          userEquityId: this.id,
          email: this.email,
          activityProductNo: this.activityProductNo,
          productName: this.productName,
          userName: this.name,
          phone: this.phone,
        }

        console.log(params)

        this.$HttpPost(this.$api.receiveInterest, params).then((res) => {
          if (res.code === '000') {
            this.showModal = true
          } else {
            Toast(`${res.desc}`)
          }
        })

      }





    },
    yesIkonw() {
      this.showModal = false
      // setTimeout(()=>{
      //   this.$router.go(-2)
      // },1000)
    }
  },
};
</script>

<style scoped lang="scss">
.interest {
  font-family: PingFangSC;
  position: fixed;
  min-height: 100%;
  width: 100%;
}

.area {
  width: 100%;
  // position: relative;
  overflow: hidden;
  z-index: 0;

  .img1 {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: block;
    z-index: -1;
  }
  .box {
    width: 87%;
    background-color: #ffffff;
    border-radius: 20px;
    margin: 0 auto;
    padding: 66px 0;
    margin-bottom: 85px;
    /**
     * @name: Hou
     * @msg:  width: 87%; update
     */
    margin-top: 52.667vw;
    .box1 {
      padding: 0 29px;
      .name {
        display: flex;
        height: 46px;
        padding: 0 29px;
        border-bottom: 1px solid #000;
        margin-bottom: 1.933vw;
        .name1 {
          width: 46%;
          font-size: 26px;
          color: #242424;
          line-height: 37px;
          font-weight: 400;
          text-align: left;
        }
        input {
          width: 100%;
          border: 0px;
          position: relative;
          bottom: 1.58vw;
          /**
         * @name: Hou
         * @msg:  bottom: 1.58vw;
         * @Date: 2020-12-15 11:00:27
         */
        }
      }
      .date {
        display: flex;
        border-bottom: 1px solid #000;
        .name1 {
          font-size: 26px;
          color: #242424;
          line-height: 37px;
          font-weight: 400;
          text-align: left;
        }
        input {
          border: 0px;
          margin-bottom: 2px;
        }
      }
      .van-cell {
        padding: 11px 0 2px 13px;
      }
      .van-cell__right-icon {
        display: none;
      }
      .emailBox {
        display: flex;
        height: 46px;
        padding: 0 29px;
        border-bottom: 1px solid #000;
        margin-top: 6.933vw;
        margin-bottom: 52px;
        .email {
          width: 37%;
          font-size: 26px;
          color: #242424;
          line-height: 37px;
          font-weight: 400;
          text-align: left;
          margin-bottom: 50px;
        }
        input {
          width: 100%;
          border: 0px;
          position: relative;
          bottom: 1.58vw;
        }
      }
      .name4 {
        display: flex;
        height: 46px;
        padding: 0 29px;
        border-bottom: 1px solid #000;
        margin-bottom: 1.933vw;
        .name5 {
          width: 37%;
          font-size: 26px;
          color: #242424;
          line-height: 37px;
          font-weight: 400;
          text-align: left;
        }
        input {
          width: 100%;
          border: 0px;
          position: relative;
          bottom: 1.58vw;
        }
      }
    }
  }

  .yesButton {
    margin: 0 auto;
    width: 583px;
    height: 105px;
    background: linear-gradient(136deg, #4b4b56 13%, #34343e 91%);
    box-shadow: 0px 9px 11px 0px rgba(104, 104, 104, 0.5);
    color: #f8d1aa;
    font-size: 37px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #f8d1aa;
    line-height: 105px;
    letter-spacing: 12px;
  }

  //pop 弹出
  // 遮罩层
  .mask {
    background-color: #000;
    opacity: 0.3;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 998 !important;
  }

  // 弹出层
  .pop {
    background-color: #fff;
    position: fixed;
    top: 40%;
    width: 80%;
    z-index: 999 !important;
    margin: 0 auto;
    border-radius: 20px;
    left: 50%;
    transform: translate(-50%);
    padding: 55px 51px 55px 51px;
    .center {
      margin-top: 26px;
      font-size: 34px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #242424;
      line-height: 48px;
    }
    .iknow {
      margin: 6vw auto 0;
      width: 339px;
      height: 65px;
      background: linear-gradient(136deg, #4b4b56 13%, #34343e 91%);
      box-shadow: 0px 9px 11px 0px rgba(104, 104, 104, 0.5);
      font-size: 33px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #f8d1aa;
      line-height: 65px;
      letter-spacing: 11px;
      text-align: center;
    }
  }
}
</style>
